<template>
  <div class="page-shop">
    <!-- 店铺信息 -->
    <div class="shop">
      <div class="shop-name df jcsb">
        <div class="shopname-l">
          <div class="name">{{ shopData.name }}</div>
          <div class="rate">
            <van-rate
              size="16px"
              gutter="5px"
              color="#fdc203"
              class="stars"
              v-model="shopData.score"
              allow-half
              void-icon="star"
              void-color="#eee"
            />
            <span class="count">({{ shopData.sellCount }})</span>
            <span>月售{{ shopData.sellCount }}单</span>
          </div>
        </div>
        <div class="shopname-r">已收藏</div>
      </div>
      <div class="shopinfo df jcsb">
        <div class="df fdc aic">
          <div>起送价</div>
          <div>{{ shopData.minPrice }}元</div>
        </div>
        <div class="df fdc aic">
          <div>商家配送</div>
          <div>{{ shopData.deliveryPrice }}元</div>
        </div>
        <div class="df fdc aic">
          <div>平均配送时间</div>
          <div>{{ shopData.deliveryTime }}分钟</div>
        </div>
      </div>
    </div>
    <div class="announcement">
      <h2 class="title">活动与公告</h2>
      <div class="text">{{ shopData.bulletin }}</div>
    </div>
    <div class="package">
      <div v-for="(item, index) in shopData.supports" :key="index">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'
export default {
  data() {
    return {
      score: '',
    }
  },
  computed: {
    ...mapState('shop', ['shopData']),
  },
  methods: {
    ...mapActions('shop', ['A_getShopInfo']),
  },
  created() {
    this.A_getShopInfo()
  },
}
</script>

<style lang="scss" scoped>
.page-shop {
  padding: 15px;
}
.shop {
  width: 100%;
  height: 200px;
  padding: 30px 20px;
  background: white;
  border-top: 1px solid #f4f5f7;
  .shop-name {
    padding-bottom: 30px;
    border-bottom: 1px solid #f4f5f7;
  }
  .name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .count {
    margin: 0 10px;
  }
  .shopinfo {
    padding: 20px 30px;
  }
}
.announcement {
  padding: 20px;
  background: #fff;
  margin-top: 20px;
  border-bottom: 1px solid #ddd;
  .title {
    margin-bottom: 10px;
  }
  .text {
    color: rgb(250, 52, 4);
    font-weight: bold;
  }
}
.package {
  margin-top: 10px;
  line-height: 30px;
  font-size: 18px;
}
</style>
